<template>
  <div class="dianzan">
    <van-nav-bar
      title="我的点赞"
    />
    <ArticleListTemp :datas="datas" :obj="obj" @onRefresh="onRefresh" @onLoad="onLoad" @onLoadFinish="onLoadFinish"></ArticleListTemp>
  </div>
</template>

<script>
import ArticleListTemp from '@/components/ArticleListTemp.vue';
import myAxios from '@/interceptors';
export default {
    name: 'DianZan',
    components:{
      ArticleListTemp
    },
    data(){
        return {
          pageSize:10,
          page:1,
          pageTotal:0,
          datas:[],
          obj:{
            loading: false,
            finished: false,
            refreshing:false,
          }
        }
    },
    methods:{
      onLoadFinish(){
        this.obj.loading = false;
      },
      async  getData() {
        try {
          const res =  await myAxios.get(`h5/interview/opt/list?page=${this.page}&pageSize=${this.pageSize}&optType=1`)

          const {data:{rows:row}} = res
          this.pageTotal = res.data.pageTotal
          
          this.datas.push(...row)
        }catch (error) {
          console.log(error)
          this.$router.push('/')
        }
        
        if(this.page >= this.pageTotal){
          this.obj.finished = true
        }
        
        this.obj.loading = true;
        this.obj.refreshing=false
        this.page++
      },
      async  onLoad(){
        // this.getData()
        await this.getData()
        this.obj.loading = false;
        
        console.log('onLoad结束了')
      },
      onRefresh(){
        console.log('onRefresh')
        this.page = 1
        // 清空列表数据
        this.obj.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.obj.loading = true;
        this.datas = []
        this.getData()
      },
      
    }
}
</script>

<style>

</style>